<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="用户名：">
            <el-input v-model="params.userName" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button type="success" @click="showEdit(undefined)">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="Id" width="50" />
        <el-table-column prop="userName" label="用户名" width="150" />
        <el-table-column prop="realName" label="真实姓名" width="150" />
        <el-table-column prop="userLevel" label="学级" width="60" />
        <el-table-column prop="sex" label="性别" width="60">
          <template v-slot="scope">
            {{ scope.row.sex === 1 ? '男' : scope.row.sex === 0 ? '女' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="modifyTime" label="创建时间" />
        <el-table-column prop="status" label="状态" width="80">
          <template v-slot="scope">
            <el-button v-if="scope.row.status == 1" type="success" size="small">启用</el-button>
            <el-button v-else-if="scope.row.status == 2" type="danger" size="small">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260px">
          <template v-slot="scope">
            <el-button size="small">禁用</el-button>
            <el-button size="small">日志</el-button>
            <el-button size="small" @click="showEdit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>


  </div>
</template>

<script setup lang="ts">
import UserAPI, { UserType } from '@/api/system/user.api'
import { UserParams } from '@/api/system/user.api'
// import { useRouter } from 'vue-router';

let tableData = ref<UserType[]>([])
let loading = ref(false)
let total = ref(0)
const router = useRouter()

const handleSizeChange = (val: number) => {
  params.value.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  params.value.pageIndex = val
  getList()
}

const params = ref<UserParams>({
  userName: "",  //用户名
  role: 1,   //角色
  pageIndex: 1,  //页码
  pageSize: 10   //每页条数
})

function getList() {
  loading.value = true
  UserAPI.getUserPage(params.value).then(res => {
    // console.log(res);
    tableData.value = res.list
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

function del(id: number) {
  ElMessageBox.confirm(
    '确定要删除吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      UserAPI.delUser(id).then(() => {
        ElMessage({
          message: "删除成功",
          type: 'success',
        })
        getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })


}

function showEdit(id: string | undefined) {
  if (id) {
    console.log(id);
  }
  router.push('studentEdit')
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.student {
  padding: 16px;
}
</style>
